﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="./common/head :: head"></head>
<link rel="stylesheet" th:href="@{/css/common.css}" >
<script type="text/javascript" th:inline="javascript">
    var contextPath = [[${session.ctx}]];
    $(function () {
        $("#loginForm").bootstrapValidator({
            live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            submitButtons: '#loginBtn',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: '验证失败',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '用户名必须输入'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '用户名长度不能小于5位或超过30位'
                        },
                    }
                },
                pass: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '密码必须输入'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '密码长度不能小于5位或超过30位'
                        },
                        threshold: 5, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: contextPath + '/login/login',//验证地址
                            message: '用户或密码不正确',//提示消息
                            delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'get',//请求方式
                            data: function (v) {
                                return $("#loginForm").serializeJSON();
                            }
                        },

                    }
                }
            }
        }) .on('success.form.bv', function(e) {//点击提交之后
            // Prevent form submission
            e.preventDefault();
            location.href= contextPath+"/main";
        });
        // $("#loginBtn").click(function (e) {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        //     // Prevent form submission
        //     e.preventDefault();
        //     $("#loginForm").bootstrapValidator('validate');//提交验证
        //     setTimeout(function () {
        //
        //         if ($("#loginForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
        //             location.href= contextPath+"/main";
        //         }
        //     },5500);
        //
        // });
    });

</script>
</head>
<body style="background-color: #ecf0f1;">
<div class="container">
    <div class="row">
        <div style="width:350px;margin: 100px auto;">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">登录</h3>
                </div>
                <div class="panel-body">
                    <form id="loginForm">
                        <div id="nameDiv" class="form-group">
                            <label for="name">用户名：</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
                        </div>
                        <div id="passDiv" class="form-group">
                            <label for="pass">密码：</label>
                            <input type="password" class="form-control" name="pass" id="pass" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <div class="pull-right" style="height: 30px">
                                <!--<a href="#">忘记密码？</a>-->
                            </div>
                        </div>
                        <div class="clearfix" style=""></div>
                        <div class="form-group text-center" style="margin-top: 5px;">
                            没有账号？ <a th:href="@{/login/register/view}">立即注册</a>
                        </div>
                        <div style="width: 100%">
                            <button id="loginBtn" type="submit" class="btn btn-success btn-block">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>